import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import axios from 'axios'; 
import {Row, Col ,Form, Icon, Input, Button, Checkbox, message } from 'antd';
const FormItem = Form.Item;

class Login extends Component{

    constructor(props){
        super(props);
    }

    componentWillMount(){
        document.title = '登录';
    }

    handleSubmit = (event) =>{
        event.preventDefault();
        let that = this;
        let loginData = `email=${this.props.form.getFieldValue('email')}&password=${this.props.form.getFieldValue("password")}`;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
        axios.post('/api/login', loginData)
            .then(function (response) {
                if(response.data.code == 200){
                    message.success('欢迎使用');
                    // 页面中添加已登陆标记
                    sessionStorage.setItem("logined",true);
                
                    that.props.history.push("/home");
                }else{
                    sessionStorage.setItem("logined",false);
                    message.error(response.data.msg);
                }
                // 子组件向父组件通信
                //that.props.callback({logined: that.state.logined});
            })
            .catch(function (error) {
                console.log(error);
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Row type="flex" justify="center">
                    <Col span={6}>
                        <p className="login-title">登录</p>
                        <Form onSubmit={ this.handleSubmit } className="login-form">
                            <FormItem>
                                {getFieldDecorator('email', {
                                    rules: [{ required: true, message: '请输入您的电子邮箱地址' }],
                                })(
                                    <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="邮箱地址" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请输入您的密码' }],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>记住我</Checkbox>
                                )}
                                 <Link to="/forget_pwd" className="login-form-forgot">忘记密码</Link> 
                            </FormItem>
                            <FormItem>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                                 <Link to="/register" className="register-form-user">注册账号</Link>
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
            </div>
        );
    }
}

export const LoginForm = withRouter(Form.create({})(Login));